<template>
  <view id="count">
		<view class="title"><text>原材料</text></view>
		<uni-list>
			<uni-list-item title="今日进场/验收" :rightText="`${material.today.total}/${material.today.value}`" />
			<uni-list-item title="本周进场/验收" :rightText="`${material.week.total}/${material.week.value}`" />
			<uni-list-item title="累计进场/验收" :rightText="`${material.total.total}/${material.total.value}`" />
		</uni-list>
		<view class="title"><text>质量巡检</text></view>
		<uni-card 
			title="整改率" 
			:extra="`整改数/总数量：${ratio.value}/${ratio.total}`" 
			:isFull="true"
		>
			<view class="percentage"><text>{{ ratio.ratio }}</text></view>
		</uni-card>
		<uni-card 
			title="巡查情况" 
			:extra="`日常巡查/问题巡查：${inspection.daily}/${inspection.problem}`" 
			:isFull="true"
			class="u-margin-top-20"
		>
			<view class="chart-box">
				<l-echart ref="pieChart"></l-echart>
			</view>
		</uni-card>
		<uni-card
			title="状态分布" 
			:isFull="true"
			class="u-margin-top-20"
		>
			<view class="chart-box">
				<l-echart ref="barChart"></l-echart>
			</view>
		</uni-card>
		<uni-card
			title="严重程度分布" 
			:isFull="true"
			class="u-margin-top-20"
		>
			<view class="chart-box">
				<l-echart ref="barChart1"></l-echart>
			</view>
		</uni-card>
		<view class="title"><text>检测取样</text></view>
		<uni-card
			title="检测取样分类统计" 
			:isFull="true"
			class="u-margin-top-20"
		>
			<view class="chart-box">
				<l-echart ref="barChart2"></l-echart>
			</view>
		</uni-card>
		<uni-card
			title="检测报告统计" 
			:isFull="true"
			class="u-margin-top-20"
		>
			<view class="chart-box">
				<l-echart ref="pieChart1"></l-echart>
			</view>
		</uni-card>
  </view>
</template>

<script>
import * as echarts from '@/uni_modules/lime-echart/components/l-echart/echarts'
import { statistics } from '@/api/index'
	
export default {
  data() {
    return {
			// 原材料统计
      material: {
				today: {
					value: 0,
					total: 0
				},
				week: {
					value: 0,
					total: 0
				},
				total: {
					value: 0,
					total: 0
				}
			},
			// 质量巡检整改率
			ratio: {
				value: 0,
				total: 0,
				ratio: ''
			},
			// 质量巡检巡查情况
			inspection: {
				daily: 0,
				problem: 0
			}
    }
  },
  onReady() {
    this.getData()
  },
  methods: {
		getData() {
			statistics({}).then(res=>{
				if (res.code == 200) {
					this.material = res.data.material
					if (res.data.ratio.length > 0) {
						this.ratio = res.data.ratio[0]
					}
					res.data.info.forEach((item, index)=>{
						if (index == 0) {
							this.inspection.daily = item.value
						} else {
							this.inspection.problem = item.value
						}
					})
					this.initChart(res.data)
				}
			})
		},
		// 初始化图表
    initChart(data) {
			let { info, status, level, sampling, report } = data
			// 质量巡检巡查情况
			this.$refs.pieChart.init(config => {
				const { canvas } = config;
				const chart = echarts.init(canvas, null, config);
				canvas.setChart(chart);
				chart.setOption({
					title: {
					  text: `总\n\n${info.length>0?info[0].total:0}`,
					  left: 'center',
					  top: 'center'
					},
					tooltip: {
					  trigger: 'item'
					},
					legend: {
					  bottom: 0,
						itemWidth: 10,
						icon: 'circle',
					  left: 'center'
					},
					color: ['#68a3e9', '#68d7ac', '#61779c', '#ecc136', '#8369f0'],
					series: [
					  {
					    type: 'pie',
					    radius: ['50%', '70%'],
					    avoidLabelOverlap: false,
					    data: info,
					    label: {
					      show: true,
					      position: 'outside',
					      fontSize: 12,
					      formatter: `{d}%`
					    },
					    emphasis: {
					      itemStyle: {
					        shadowBlur: 10,
					        shadowOffsetX: 0,
					        shadowColor: 'rgba(0, 0, 0, 0.5)'
					      }
					    }
					  }
					]
				});
				return chart;
			});
			// 质量巡检状态分布
			let statusXAxis = [], statusData = []
			status.forEach(item=>{
				statusXAxis.push(item.name)
				statusData.push(item.value)
			})
			this.$refs.barChart.init(config => {
				const { canvas } = config;
				const chart = echarts.init(canvas, null, config);
				canvas.setChart(chart);
				chart.setOption({
					tooltip: {
						trigger: 'axis'
					},
					legend: {
						bottom: 0,
						data: ['状态分布']
					},
					grid: {
						top: 25,
						left: 10,
						right: 20,
						bottom: 30,
						containLabel: true
					},
					xAxis: {
					  type: 'category',
					  axisTick: {
					    alignWithLabel: true
					  },
					  axisLine: {
					    lineStyle: {
					      color: '#999'
					    }
					  },
					  axisLabel: {
					    color: '#333'
					  },
					  data: statusXAxis
					},
					yAxis: {
					  type: 'value',
					  axisTick: {
					    show: false
					  },
					  axisLine: {
					    show: false
					  }
					},
					color: ['#68a3e9', '#68d7ac', '#61779c', '#ecc136', '#8369f0'],
					series: [
					  {
					    name: '状态分布',
					    barGap: '90%',
					    barCategoryGap: '70%',
					    data: statusData,
					    type: 'bar'
					  },
					]
				});
				return chart;
			});
			// 质量巡检严重程度分布
			let levelXAxis = [], levelData = []
			level.forEach(item=>{
				levelXAxis.push(item.name)
				levelData.push(item.value)
			})
			this.$refs.barChart1.init(config => {
				const { canvas } = config;
				const chart = echarts.init(canvas, null, config);
				canvas.setChart(chart);
				chart.setOption({
					tooltip: {
						trigger: 'axis'
					},
					legend: {
						bottom: 0,
						data: ['严重程度']
					},
					grid: {
						top: 25,
						left: 10,
						right: 20,
						bottom: 30,
						containLabel: true
					},
					xAxis: {
					  type: 'category',
					  axisTick: {
					    alignWithLabel: true
					  },
					  axisLine: {
					    lineStyle: {
					      color: '#999'
					    }
					  },
					  axisLabel: {
					    color: '#333'
					  },
					  data: levelXAxis
					},
					yAxis: {
					  type: 'value',
					  axisTick: {
					    show: false
					  },
					  axisLine: {
					    show: false
					  }
					},
					color: ['#68d7ac'],
					series: [
					  {
					    name: '严重程度',
					    barGap: '90%',
					    barCategoryGap: '70%',
					    data: levelData,
					    type: 'bar'
					  },
					]
				});
				return chart;
			});
			// 检测取样分类统计
			let samplingXAxis = [], samplingData = []
			sampling.forEach(item=>{
				samplingXAxis.push(item.name)
				samplingData.push(item.value)
			})
			this.$refs.barChart2.init(config => {
				const { canvas } = config;
				const chart = echarts.init(canvas, null, config);
				canvas.setChart(chart);
				chart.setOption({
					tooltip: {
						trigger: 'axis'
					},
					legend: {
						bottom: 0,
						data: ['分类']
					},
					grid: {
						top: 25,
						left: 10,
						right: 20,
						bottom: 30,
						containLabel: true
					},
					xAxis: {
					  type: 'category',
					  axisTick: {
					    alignWithLabel: true
					  },
					  axisLine: {
					    lineStyle: {
					      color: '#999'
					    }
					  },
					  axisLabel: {
					    color: '#333'
					  },
					  data: samplingXAxis
					},
					yAxis: {
					  type: 'value',
					  axisTick: {
					    show: false
					  },
					  axisLine: {
					    show: false
					  }
					},
					color: ['#8369f0'],
					series: [
					  {
					    name: '分类',
					    barGap: '90%',
					    barCategoryGap: '70%',
					    data: samplingData,
					    type: 'bar'
					  },
					]
				});
				return chart;
			});
			// 检测报告统计
			this.$refs.pieChart1.init(config => {
				const { canvas } = config;
				const chart = echarts.init(canvas, null, config);
				canvas.setChart(chart);
				chart.setOption({
					tooltip: {
					  trigger: 'item'
					},
					legend: {
					  bottom: 0,
						itemWidth: 10,
						icon: 'circle',
					  left: 'center'
					},
					color: ['#68a3e9', '#68d7ac', '#61779c', '#ecc136', '#8369f0'],
					series: [
					  {
					    type: 'pie',
					    radius: ['50%', '70%'],
					    avoidLabelOverlap: false,
					    data: report,
					    label: {
					      show: true,
					      position: 'outside',
					      fontSize: 12,
					      formatter: `{d}%`
					    },
					    emphasis: {
					      itemStyle: {
					        shadowBlur: 10,
					        shadowOffsetX: 0,
					        shadowColor: 'rgba(0, 0, 0, 0.5)'
					      }
					    }
					  }
					]
				});
				return chart;
			});
		}
  }
}
</script>
<style lang="scss" scoped>
	#count {
		min-height: 100vh;
		background-color: #fafafa;
		
		.title {
			display: flex;
			font-size: 14px;
			padding: 10px 20px;
			position: relative;
			align-items: center;
			
			&::before {
				top: 12px;
				left: 10px;
				content: '';
				width: 4px;
				height: 16px;
				position: absolute;
				border-radius: 10px;
				background-color: #2979ff;
			}
		}
		
		.percentage {
			display: flex;
			color: #3DAE3A;
			font-size: 32px;
			font-weight: 700;
			align-items: center;
			justify-content: center;
		}
		
		.chart-box {
			width: 100%;
			height: 200px;
		}
	}
</style>
